<template>
  <view class="indexWraps">
    <!-- state.show = false -->
    <up-popup :show="state.show" :round="16" mode="bottom" closeable @close="close">
      <view class="pop-title">补充信息获取推荐摄入量</view>
      <view class="pop-body">
        <view class="patInfo">{{
          state.userInfo.patName + ' ' + state.userInfo.gender + ' ' + state.userInfo.age + '岁'
        }}</view>
        <view class="input-box">
          <view class="left">身高</view>
          <view class="right">
            <!-- @blur="saveHeight" -->
            <input
              type="digit"
              class="popup_input"
              placeholder="请输入"
              v-model="state.dietQuestionInfo.height"
              :border="false"
            />
            <text>cm</text>
          </view>
        </view>
        <view class="input-box">
          <view class="left">当前体重</view>
          <view class="right">
            <!-- @blur="saveWeight" -->
            <input
              type="digit"
              class="popup_input"
              placeholder="请输入"
              v-model="state.dietQuestionInfo.weight"
              :border="false"
            />
            <text>kg</text>
          </view>
        </view>
        <view class="topic_title">劳动强度</view>
        <view v-if="state.dietQuestionList && state.dietQuestionList.length > 0" class="topics">
          <!-- @tap="answerSelect(item, 1)" -->
          <view
            v-for="(item, index) of state.dietQuestionList[0].list[2].options"
            :key="index"
            :class="['topic', state.dietQuestionInfo.laborIntensity == item.value ? 'active' : '']"
            >{{ item.value }}</view
          >
        </view>
        <view class="topic_title">
          是否需要减重
          <view v-if="questionBmi < 24" class="tag needlose">您的体重未超标，不需要减重</view>
        </view>
        <view v-if="state.dietQuestionList && state.dietQuestionList.length > 0" class="topics">
          <view
            v-for="(item, index) of state.dietQuestionList[0].list[3].options"
            :key="index"
            :class="[
              'topic',
              state.dietQuestionInfo.ifNeedWeightLose == item.value ? 'active' : '',
              questionBmi < 24 ? 'disabled' : ''
            ]"
            >{{ item.value }}</view
          >
          <!-- @tap="answerSelect(item, 2)" -->
        </view>
        <view class="fixed">
          <!-- @tap="submit" -->
          <button class="confirm-btn popbtn">提交</button>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup lang="ts">
import { reactive, watch, ref, computed } from 'vue'
const props = defineProps({
  userInfo: Object,
  show: Boolean,
  dietQuestionInfo: Object,
  dietQuestionList: Array
})
const emit = defineEmits(['closePopup'])
const state = reactive({
  userInfo: {},
  dietQuestionInfo: {
    height: 0,
    weight: 0,
    ifNeedWeightLose: '',
    laborIntensity: ''
  },
  show: false,
  dietQuestionList: []
})
watch(
  () => props.userInfo,
  (newValue, oldValue) => {
    state.userInfo = newValue
    console.log(111, newValue)
  },
  {
    immediate: true,
    deep: true
  }
)
watch(
  () => props.dietQuestionInfo,
  (newValue, oldValue) => {
    state.dietQuestionInfo = newValue
    console.log(222, newValue)
    // emit('childEvent', newValue)
  },
  {
    immediate: true,
    deep: true
  }
)
watch(
  () => props.show,
  (newValue, oldValue) => {
    state.show = newValue
    console.log(333, newValue)
    // emit('childEvent', newValue)
  },
  {
    immediate: true,
    deep: true
  }
)
watch(
  () => props.dietQuestionList,
  (newValue, oldValue) => {
    state.dietQuestionList = newValue
    console.log(4444, newValue)
    // emit('childEvent', newValue)
  },
  {
    immediate: true,
    deep: true
  }
)
const questionBmi = computed(() => {
  if (state.dietQuestionInfo.weight && state.dietQuestionInfo.height) {
    return (
      state.dietQuestionInfo.weight /
        ((state.dietQuestionInfo.height / 100) * (state.dietQuestionInfo.height / 100)) || 0
    )
  } else {
    return 25
  }
})
const close = () => {
  //   uni.navigateTo({
  //     url: '/module/src/pages/echartsInfo/index?type=' + type
  //   })
  emit('closePopup', 'false')
}
const healthInfo = (type) => {
  uni.navigateTo({
    url: '/module/src/pages/echartsInfo/index?type=' + type
  })
}
</script>

<style lang="scss" scoped>
.indexWraps {
  height: auto;
  // 补充信息弹窗样式
  .pop-title {
    height: 108rpx;
    font-size: 32rpx;
    font-weight: 700;
    line-height: 108rpx;
    color: #222;
    text-align: center;
    border-bottom: 1rpx solid #e5e6eb;
  }
  .pop-body {
    // 搜索弹窗
    padding: 0 32rpx;

    .patInfo {
      background: #e8f7ff;
      border-radius: 4rpx;
      padding: 16rpx 24rpx;
      margin: 32rpx 0 24rpx;
      font-weight: 400;
      font-size: 30rpx;
      color: #3491fa;
    }

    .input-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 108rpx;
      padding: 0 32rpx;
      margin-bottom: 24rpx;
      background: #fafafa;
      border: 1rpx solid #e5e6eb;
      border-radius: 16rpx;

      .left {
        font-size: 30rpx;
        font-weight: 500;
        color: #222;
      }

      .right {
        display: flex;
        align-items: center;
        background: #fafafa;

        .popup_input {
          font-size: 30rpx;
          font-weight: 400;
          color: #222;
          text-align: right;
          margin-right: 16rpx;
        }

        .img-more {
          width: 32rpx;
          height: 32rpx;
        }
      }
    }
    .topic_title {
      display: flex;
      align-items: center;
      margin-top: 40rpx;
      font-size: 32rpx;
      font-weight: 700;
      color: #222;

      .tag {
        display: inline-block;
        padding: 4rpx 16rpx;
        margin-left: 8rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #fff;
        text-align: center;
        background: #5c8eff;
        border-radius: 4rpx;
      }

      .needlose {
        background: #ff813c;
      }
    }
    .topics {
      margin-top: 40rpx;

      .topic {
        width: 630rpx;
        height: 88rpx;
        padding-left: 32rpx;
        margin-bottom: 24rpx;
        font-size: 30rpx;
        font-weight: 400;
        line-height: 88rpx;
        text-align: left;
        background: #fafafa;
        border-radius: 8rpx;
      }

      .active {
        color: #00d1b6;
        background: rgb(0 209 182 / 5%);
        border: 1rpx solid #00d1b6;
      }

      .disabled {
        color: #ccc;
        background: #f5f5f5;
        border: 1rpx solid #e5e6eb;
      }
    }

    .popbtn {
      width: 100%;
      font-size: 32rpx;
      font-weight: 700;
      color: #fff;
      background: #00d1b6;
      border: 1rpx solid #00d1b6;
      border-radius: 44rpx;
    }
  }
  ::v-deep .u-popup {
    .popup-wrap {
      //   padding-bottom: calc(rpx + constant(safe-area-inset-bottom));
      //   padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
      padding-bottom: 24rpx;

      .title {
        padding: 32rpx;
        font-size: 32rpx;
        font-weight: 700;
        text-align: center;
        border-bottom: 1px solid #e5e6eb;
      }

      .popupContent {
        display: inline-block;
        max-height: 756rpx;
        padding: 32rpx;
        overflow: auto;
        font-size: 30rpx;
        font-weight: 400;
        line-height: 54rpx;
        color: #222;
        text-align: justify;
      }

      .btn {
        height: 88rpx;
        margin: 32rpx 32rpx 0;
        font-size: 32rpx;
        font-weight: 700;
        line-height: 88rpx;
        color: #fff;
        text-align: center;
        background: #00d1b6;
        border-radius: 44rpx;
      }
    }

    .u-popup__content__close {
      top: 40rpx;

      .uicon-close {
        font-size: 32rpx !important;
        line-height: 32rpx !important;
      }
    }
  }
}
</style>
